<template>
	<view>
		<view class="content-image-body">
		
		<block   v-for="(item1,i1) in bodyList" :key="i1">
			<view class="content-image" >
				<image :src="item1.image_src" ></image>
				<text>{{item1.name}}</text>
				<view class="text-name">
					{{item1.text}}
				</view>
			</view>
		</block>
		</view>
	</view>
</template>

<script>
	import {bodyList} from "../../utils/bodyList.js"
	export default {
		name:"context",
		data() {
			return {
				bodyList:bodyList
			};
		}
	}
</script>

<style lang="scss" scoped>
	.content-image-body{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		// width: 33.3%;
			margin: 20rpx;
	.content-image{
		display: flex;
		
		flex-direction: column;
		margin: 20rpx 10rpx;
		width: 150rpx;
		height: 320rpx;
		.text-name{
			color: gray;
			margin: 10rpx;
		}
		text{
			margin-top: 10rpx;
			font-size: 24rpx;
		}
		image {
			width: 150rpx;
			height: 250rpx;
			// margin-right: 30rpx;
			border-radius: 10rpx;
		}
	}
	}
</style>
